<template>
  <div :class="{ 'home-user-info': true, 'home-user-info-standard': layout == 'standard' }">
    <div class="user-info">
      <ui-avatar class="user-img" :src="fileName"></ui-avatar>
      <div class="info">
        <p class="username">您好，{{ loginInfo.userName }}</p>
        <p class="user-role">{{ loginInfo.entName }}</p>
        <p class="user-msg">上次登录时间：{{ loginInfo.lastLoginDate }}</p>
        <p class="user-msg">预留信息：{{ loginInfo.reservedInfo }}</p>
        <ui-button plain type="primary">预留信息</ui-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  data() {
    return {
      loginInfo: {},
      fileName: require('@/assets/image/home/avatar.png'),
    };
  },
  computed: {
    ...mapState('vxadmin/layout', ['layout']),
    ...mapState('vxadmin/theme', ['activeName']),
  },
  created() {
    this.loginInfo = this.strToJson(localStorage.getItem('loginInfo'));
  },
};
</script>

<style lang="scss">
$indexMainC: #ea6121;
.home-user-info {
  background: url(~@/assets/image/home/usrView.png) no-repeat center;
  background-size: 100% 220px;
  .ui-avatar > img {
    width: 100%;
    height: auto;
  }
  .user-info {
    text-align: center;
    margin-top: 30px;
    display: flex;
    margin-left: 80px;
    .user-img {
      width: 90px;
      height: 90px;
      text-align: center;
    }
    .info {
      margin: 0px 10px;
      text-align: left;
      .username {
        // font-size: $s18;
        font-weight: 600;
        font-size: $s24;
        // text-align: left;
        color: $color-text-main;
        margin-bottom: 4px;
      }
      .user-role {
        // text-align: left;
        font-size: $s14;
        text-align: left;
        color: $color-text-main;
        line-height: 19px;
        letter-spacing: 0px;
        margin-bottom: 4px;
      }
      .user-msg {
        font-size: $s12;
        text-align: left;
        color: $color-text-normal;
        line-height: 17px;
        letter-spacing: 0px;
        margin-bottom: 4px;
      }
    }
  }
}
.home-user-info-standard {
  background: rgba(225, 225, 225, 0.1);
  border-radius: 10px;
  height: 200px;
  .user-info {
    .user-img {
      border: 4px #fff solid;
    }
    .info {
      .username {
        color: $color-text-primary;
      }
      .user-role {
        color: $color-text-primary;
        font-size: 17px;
        line-height: 25px;
      }
      .user-msg {
        color: rgba(225, 225, 225, 0.7);
      }
    }
  }
}
</style>
